iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
1
自我挑戰組

WordPress 客製化從 0 開始系列 第 3

Day 3 從 WordPress 看其他 HTML 標籤

  • 分享至 

  • xImage
  •  

大家好,我是 Eric。

上一篇文章中,我們先看到負責管理頁面架構的語意化標籤。

今天,我們再進一步了解跟「內容」有關的 HTML 標籤,以及 HTML 中的屬性 (attributes) 與 WordPress 的編碼標準 (coding standard)。

與內容有關的語意化標籤

W3C 的規範中,我們可以查閱不同語意化標籤的定義,以及相關的用法與限制。但坦白說,我自己也沒有讀完,大多數的語意問題也都是在編寫的過程中,逐一偵錯。

一般來說,常見的標籤有以下幾種:

p

根據 W3C 的定義,<p> 標籤代表「段落」。
在 WordPress 5 之後的區塊編輯器中,每按一次 Enter 鍵,便會自動建立一個新的 <p> 標籤。

這邊值得注意的是,<p> 並不能包含項目列表 <ul><ol>,這是因為 HTML 的標籤,是網頁的「結構標籤」,協助瀏覽器了解網頁架構,而不是「邏輯標籤」,符合使用者想像的區塊空間。
舉例來說:

<p> 這是我認為論述應該要有的要素:
    <ul>
        <li> 核心論點 </li>
        <li> 輔助事實 </li>
        <li> 反證論點 </li>
        <li> 駁斥反證論點 </li>
        <li> 結論 </li>
    </ul>
如果沒有包含上述要素的話,就是不完全的論述。</p>

在經過瀏覽器轉譯後,會變成:

<p> 這是我認為論述應該要有的要素:</p>
    <ul>
        <li> 核心論點 </li>
        <li> 輔助事實 </li>
        <li> 反證論點 </li>
        <li> 駁斥反證論點 </li>
        <li> 結論 </li>
    </ul>
<p>如果沒有包含上述要素的話,就是不完全的論述。</p>  

div

嚴格說起來,<div> 並不能稱為「語意化」標籤,
因為它的作用,是在告訴瀏覽器:「這裡有一個區塊。」

由於 <div> 賦予開發人員相當高的彈性,
因此廣泛用於各種場合,甚至到了濫用的地步。

反正不知道要用什麼的話,用 <div> 就沒問題了。

但這種做法並不符合 HTML5 的演化方向,
所以建議還是在適當的場合使用符合情境的語意化標籤。

那什麼時候需要用 <div> 呢?

在 HTML5 中,有些人會濫用 <section>,將其作為內容的容器,但忽略了 <section><p> 一樣,是「結構標籤」,而非「邏輯標籤」。

如果想要製作一個內容容器時,用 <div> 會比 <section> 還要合適。

img

顧名思義,就是標記圖片的標籤。

基本的語法 (syntax) 如下:

<img src="圖片位址" alt="替代文字" />

至於與圖片有關的其他屬性,如 srcsetwidth 等,並非本次的重點,這裡就先不贅述。

a

這個廣泛用於所有連結,基本語法如下:

<a href="連結位置" target="開啟方式">錨點文字</a>

開啟方式,主要有 _blank_self 兩種,前者會開啟新視窗/頁籤,後者則是在當前視窗/頁籤中開啟連結頁面。

h1 ~ h6

在 SEO 的領域中,標題標籤 <h1> ~ <h6> 是常常拿出來討論的話題。由於這些標題具有階級關係,因此在撰寫時需要特別注意。有些寫作風格認為一個頁面中只能存在一個 <h1> 標籤,但如果查閱 W3C 的標準,會發現這種說法並不完全正確。

由於相同階級的標題,會具有相同的權重,因此如果一個頁面中有多個 <h1> 標籤,對瀏覽器而言,代表有多個權重最高的標題。

但如果未規劃好位階的話,那就像是讀書畫重點時,將整個段落全部畫重點一樣,失去了「重點」的意義了。

table, tr, th, td

表格元素,基本的語法為:

<table>
  <tr>
    <th>第一欄的欄位標題</th>
    <th>第二欄的欄位標題</th>
  </tr><!-- 第一列 -->
  <tr>
     <td>第二列第一欄儲存格</td>
     <td>第二列第二欄儲存格</td>
  </tr><!-- 第二列 -->
  <tr>
     <td>第三列第一欄儲存格</td>
     <td>第三列第二欄儲存格</td>
  </tr><!-- 第三列 -->
</table>

然而,隨著回應式網頁設計 (responsive web design) 的發展,使用 <table> 的比例開始降低,因為 <table> 在版面的調整上限制較多,較難真正做到回應式的變化。

form, input 以及其他表單相關標籤

我們從〈Twenty Twenty〉的 searchform.php 中,可以看到以下的程式碼:

//searchform.php Line 22
<form role="search" <?php echo $aria_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped above. ?> method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label for="<?php echo esc_attr( $unique_id ); ?>">
		<span class="screen-reader-text"><?php _e( 'Search for:', 'twentytwenty' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
		<input type="search" id="<?php echo esc_attr( $unique_id ); ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder', 'twentytwenty' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
	</label>
	<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'twentytwenty' ); ?>" />
</form>

上述的範例是站內搜尋的搜尋欄位,我們可以知道,<form> 可以用來告訴瀏覽器:「接下來整個區塊是表單」。<form> 這個標籤,有 2 個特殊的屬性 (attributes,詳見下一段):methodactionaction 決定提交表單後,要前往哪個頁面,method 則決定了資料要以何種方式傳遞給 action 到達的頁面,常見的方式有兩種:

  • get: 這種方法會將表單的資料用明碼 (未加密) 的方式,轉變成網址的查詢參數 (譬如: https://example.com/?s=7777)。通常只有搜尋表單會用這種方式儲存表單資訊。
  • post: 這種方法則是透過 HTTP 標頭的方法傳遞資料,不會直接顯示在網址上。通常對於需要加密的使用者資料,都會使用這個方法傳遞。

其中 <input> 是表單的基本元素,代表輸入給表單的資料。根據需求不同,可以透過 type 這個屬性,代表不同的表單欄位格式,以下簡介幾種:

  • text: 單行文字表單,譬如填寫姓名與地址。
  • password: 密碼表單,無法複製欄位裡的值。
  • checkbox: 核取方塊,一般所謂的「可複選」的欄位使用。
  • radio: 選項按鈕,一般所謂的「單選」欄位使用。透過相同的屬性 name 來決定是否屬於同一個選項群組。
  • email: 電子郵件位址,在部分手機的瀏覽器上,會顯示相對應的鍵盤。
  • tel: 電話,在部分手機的瀏覽器上,會顯示相對應的鍵盤。
  • submit: 提交按鈕,點擊後會開始執行 <form> 中指定的行動。透過 value 這個屬性,指定提交按鈕內欲顯示的文字。如 <input type="submit" value="點我送出" />

<input> 對應的,是 <label> 這個標籤,通常 <label> 會使用 for="{{input id}}" 這個屬性,告訴瀏覽器這個標籤屬於哪一項欄位。

HTML 中的屬性 (attributes)

回到我們一開始的 header.php 檔案。

<?php
/**
 * Header file for the Twenty Twenty WordPress default theme.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since 1.0.0
 */

?><!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

	<head>

		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" >

		<link rel="profile" href="https://gmpg.org/xfn/11">

		<?php wp_head(); ?>

	</head>

	<body <?php body_class(); ?>>

		<?php
		wp_body_open();
		?>

		<header id="site-header" class="header-footer-group" role="banner">

我們可以發現,每個標籤後面,都有若干個 xxx="ooo" 的「屬性」。
不同的標籤,支援的屬性都略有不同,但不論是哪一種標籤,以下 3 種屬性必定是共通的:

  • class 這個屬性,是用來將元素分類,供 CSS 選擇器使用,使用同樣的 class,往往代表著這些元素會有相同的樣式。
  • id 頁面中元素的識別碼。正因為是識別碼,因此在同一個頁面中,不能出現重複的 id。和 class 一樣可以作為 CSS 選擇器的標的。
  • style 有時候,我們會加入 style 這個屬性,用來標註內嵌樣式 (inline style)。必須注意的是,內嵌樣式並沒有辦法實踐 RWD 的設計,因此如果有需要回應式設計的樣式,必須透過 CSS 來定義。

除了上述三種共通的屬性外,另一種屬性稱為資料屬性 (data attributes),其表現的方式就會是 data-xxx="ooo"

通常資料屬性是要將特定資料傳遞給 JavaScript 做使用,因此在這裡就不多加贅述。

WordPress 中 HTML 的編碼標準

編碼標準 (coding standard) 是所有專案中最重要,卻也最容易被忽略的部分。

為什麼有編碼標準

就像是每個作家會有不同的寫作風格,每個開發人員撰寫程式碼的風格也不盡相同。為了避免新加入的開發人員無法理解程式碼背後的運作邏輯,因此大多數的開源專案都會訂立編碼標準,用來維持程式碼品質。

WordPress 的編碼標準

透過 WordPress 的官方文件,我們可以了解 WordPress 對 HTML 程式碼的要求有以下幾點:

  • 對於沒有結尾標籤 (closing tag) 的標籤,如 <img>,必須使用自我結尾標記 (self-closing tag),例如 <img src="..." alt="... />
  • 所有的標籤必須使用小寫 (HTML 並沒有限制必須小寫,但為了開發人員的易讀性,統一使用小寫)。
  • 所有屬性的值必須用引號包覆,不論是單引號或雙引號。
  • 縮排須要符合結構的邏輯,可參考下列語法。此外,縮排使用的是 tab,而非空格。
<div class="class" id="id>
   <p class="paragraph" id="p1"><!-- 這裡用縮排表示 p 是在 div 之下 -->
   </p>
</div>

其他編碼慣例 (coding convention)

  • 使用註解 <!--- 這個是註解 --->。由於不同的開發者編碼習慣不同,因此註解對於新進開發者了解目前程式碼的功用有相當顯著的幫助。以 Twenty Twenty 來看,註解的功用,主要在註記區塊的範圍。
  • 屬性雖然沒有順序的問題,但 classid 的先後順序最好統一,這是因為後面討論 PHP,使用規則運算式 (regular expression 或 RegEX) 時,統一的順序可以降低比對的困難度。

結語

今天的內容主要包含了 HTML 中常見的語意化標籤,以及 HTML 會使用的共通屬性 classidstyle。除此之外,也說明了為什麼需要「編碼標準」。

如果今天是只有自己會維護的專案,那麼是否符合編碼標準,並非強制的。然而,如果這個專案是需要交接的,或者是開源專案,那麼遵守編碼標準,對於其他工程師而言,可以節省許多重新理解編碼架構的功夫。

截至目前為止,我們的討論都是針對頁面上實際看得到的要素:<body> 內的內容進行說明。下一章,我們要開始走進稍微抽象一點的 <head> 的世界,解說跟識別網頁相關的「中繼資料」與掌管網頁肉體 CSS 與靈魂 JavaScript 的區塊。


上一篇
Day 2 用 WordPress 了解 HTML5 語意化標籤
下一篇
Day 4 用 WordPress 了解 head 記載的中繼資料及靜態資源
系列文
WordPress 客製化從 0 開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言